<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://struts.apache.org/tags-html"  prefix="html"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style type="text/css">
<!--
.STYLE1 {
	font-size: 14px;
	font-weight: bold;
	color: #000066;
}
.STYLE2 {
	font-size: 16px;
	font-weight: bold;
	color: #000066;
}
-->
</style>
 <link href="CSS/Accessible_Design.css" rel="stylesheet" type="text/css" />
    <base href="<%=basePath%>">
    
    <title>审批流管理</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type='text/javascript' src='dwr/engine.js'> </script>
		<script type='text/javascript' src='dwr/util.js'> </script>
		<script type='text/javascript' src='dwr/interface/DwrSelectFlowLineByFlowId.js'> </script>
		<script type="text/javascript">
		function selectFlowLine(){
		   
			var flowId=document.getElementById("flowId").value;
			DwrSelectFlowLineByFlowId.selectFlowLine(flowId,getName);
		}
		function getName(name)
		{
		   
		    var havaFlowLineList=name.flowLineList;
		    var noFlowLineList=name.roleList;
		    //获得这个下拉列表组件
		  	var haveFlowLineName=document.getElementById("haveFlowLineName");
		  	
		  	var noFlowLineName=document.getElementById("noFlowLineName");
		  	//删除被选择的角色这个列表里所有选项
		  for (var j = haveFlowLineName.options.length - 1; j >= 0; j--) {
	            haveFlowLineName.options.remove(j);
	        }
			//删除未被选择的角色这个列表里所有选项
			
			for (var j = noFlowLineName.options.length - 1; j >= 0; j--) {
	            noFlowLineName.options.remove(j);
	        }
	        
	        //往这个下拉列表里添加选项，内容是从dwr得到的值
			for(var i = 0;i < havaFlowLineList.length;i++)
			{		
			    haveFlowLineName.options.add(new Option(havaFlowLineList[i].role.roleName,havaFlowLineList[i].role.roleId));
					
			}
			
			for(var i = 0;i < noFlowLineList.length;i++)
			{
			    noFlowLineName.options.add(new Option(noFlowLineList[i].roleName,noFlowLineList[i].roleId));
			}
		}
		
		
		function toLeftChange(){
		
		var noSelectId=document.getElementById("noFlowLineName").value;
		if(noSelectId==""){
		
		return null;
		}
		
		
		var obj=document.getElementById("noFlowLineName");
		var index = obj.selectedIndex; // 选中索引
		var noSelectName = obj.options[index].text; // 选中文本
		//var value1 = obj.options[index].value; // 选中值
		//alert(noSelectId+"+"+text);
		
		
		var haveFlowLineName=document.getElementById("haveFlowLineName");
		var noFlowLineName=document.getElementById("noFlowLineName");
		haveFlowLineName.options.add(new Option(noSelectName,noSelectId));
		noFlowLineName.options.remove(index);
		}
		
		
		function toRightChange(){
		
		var selectId=document.getElementById("haveFlowLineName").value;

		if(selectId==""){
		return null;
		}
		var obj=document.getElementById("haveFlowLineName");
		var index = obj.selectedIndex; 
		var selectName = obj.options[index].text; 
		
		var haveFlowLineName=document.getElementById("haveFlowLineName");
		var noFlowLineName=document.getElementById("noFlowLineName");
		
		noFlowLineName.options.add(new Option(selectName,selectId));
		haveFlowLineName.options.remove(index);
		}
		
		
		  function move(direction){ 
		  
		  
		   var currentSel=document.getElementById("haveFlowLineName");
		   
		   if(currentSel.value==""){return ;}
			var index = currentSel.selectedIndex; 
			if(direction){//up 
			if(index==0) return null; 
			
			var value = currentSel.options[index-1].value; 
			var text = currentSel.options[index-1].text; 
			
			currentSel.options[index-1].value = currentSel.options[index].value; 
			currentSel.options[index-1].text = currentSel.options[index].text; 
			
			currentSel.options[index].value = value; 
			currentSel.options[index].text = text; 
			
			currentSel.options[index].selected = false; 
			currentSel.options[index-1].selected = true; 
			}else{//down 
			if(index==(currentSel.length-1)) return; 
			
			var value = currentSel.options[index+1].value; 
			var text = currentSel.options[index+1].text; 
			
			currentSel.options[index+1].value = currentSel.options[index].value; 
			currentSel.options[index+1].text = currentSel.options[index].text; 
			
			currentSel.options[index].value = value; 
			currentSel.options[index].text = text; 
			
			currentSel.options[index].selected = false; 
			currentSel.options[index+1].selected = true; 
			} 
			} 
		
		
		  function SelectAll(){
			for(var i=0;i<document.theForm.haveFlowLineName.length;i++){
			document.theForm.haveFlowLineName.options[i].selected=true;}
			//var flowId=document.getElementById("flowId").value;
			//var flowLine=document.getElementById("haveFlowLineName").value;
			
			theForm.action='updateFlowLine.do';
			theForm.submit();
			}
			
			function changeSubmit(){
			
		    var currentSel=document.getElementById("flowId"); 
		     if(currentSel.value==""){return ;}
			theForm.action='changeFlowShow.do';
			theForm.submit();
			}
		  
		
         </script>
	
  </head>
  
  <body>
    <html:form action="deleteFlow.do" styleId="theForm">
    <table width="450" height="171" border="1" cellspacing="0" class="small">
    <tr><td colspan="7" align="center" class="STYLE2"> 审批流管理 </td> </tr>
  <tr>
    <td colspan="4"><div align="center" class="STYLE1">审批流</div></td>
    <td colspan="2"><div align="center" class="STYLE1">已添加的节点</div></td>
    <td colspan="1"><div align="center" class="STYLE1">未添加的节点</div></td>
  </tr>
  <tr>
  
    <td height="65" colspan="3" align="center">
    <html:select property="flowId" size="10" multiple="8" onclick="selectFlowLine();" styleId="flowId"> 
     <c:forEach items="${flowList}" var="flow">
     	<html:option value="${flow.flowId}" >${flow.flowName}</html:option>
 	 </c:forEach>
    </html:select>
    </td>
    
    
    
    <td>
    <a href="admin/FlowAdd.jsp">添加</a>
    <br>
    <html:submit  value="删除"></html:submit>
     <br>
     <html:submit  value="修改" onclick="return changeSubmit();"></html:submit>
    </td>
    
    
    
     <td align="center" width="140">
    	<html:select property="haveFlowLineName" size="10" multiple="8"  styleId="haveFlowLineName"> 
    	<html:option value="99">该审批流的下属节点</html:option>
    	</html:select>
   	</td>
   	<td  align="center" width="20">
    	
    	<html:button property="" value="==>"  onclick="toRightChange();"></html:button>
    	<html:button property="" value="<=="  onclick="toLeftChange();"></html:button>
    	
    	<html:button property="" value="上移"  onclick="move(true);"></html:button>
    	<html:button property="" value="下移"  onclick="move(false);"></html:button>
   	</td>
   	<td  align="center" >
    	<html:select property="noFlowLineName" size="10" multiple="8" styleId="noFlowLineName"> 
    	<html:option value="99">未添加到角色名称</html:option>
    	</html:select>
   	</td>
    
  </tr>
  <tr>
	  <td colspan="7" align="center">
	  <html:submit value="保存" onclick="SelectAll();"></html:submit>
	  </td>
  </tr>
</table>
</html:form>
  </body>
</html>
